// ---------------------   左中task2 地图  --------------------------------------
function market5(market_name='华冠超市', saleOrRishang='销量', max='max_销量') {
    $.post('http://127.0.0.1:5000/data-api/task5', {market_name: market_name}).done(function (data) {
        // 销售额 还是 日商 的单位
        var unit = saleOrRishang=='各省销量'?"万斤":"斤";
        var myChart = echarts.init(document.querySelector(".map .chart"));
        var option = {
            title: {
                text: '各省份总销量和门店平均销量',
                textStyle: {
                    color: '#4ddaf2',
                    fontSize: 22,
                },
                top: 40,
                left: 50,
            },
            tooltip: {
                show: true,
                formatter: function (params) {
                    return '&nbsp;&nbsp;' + params.name + '&nbsp;:&nbsp;&nbsp;' + params.value + unit + '&nbsp;&nbsp;';
                }
            },
            visualMap: {
                show: true,
                type: 'continuous',
                calculable: true,
                seriesIndex: [0],
                min: 0, // handle的：最低和最高值
                max: data[max],
                left: '15',
                bottom: '15',
                itemWidth: 27,
                itemHeight: 65,
                textStyle: {
                    color: '#e6e6e6',
                    fontSize: 14,
                },
                inRange: {
                    color: ['#B2CAE0', '#D2EAFF', '#8AC6FD', '#45A5F8']
                },
                outOfRange: {
                    color: ['#999999']
                }
            },
            geo: {
                map: 'china',
                show: true,
                roam: true,
                zoom: 1.2,
                itemStyle: {
                    normal: {
                        borderColor: 'rgba(0,63,140,0.2)',
                        shadowColor: 'rgba(0,63,140,0.2)',
                        shadowOffsetY: 20,
                        shadowBlur: 30,
                    },
                    emphasis: {
                        // 悬浮区背景
                        areaColor: new echarts.graphic.LinearGradient(0, 1, 0, 0,
                                [
                                    {
                                        offset: 0,
                                        color: '#e77171'   // 渐变色的起始颜色
                                    },
                                    {
                                        offset: 1,
                                        color: '#ecec72'   // 渐变线的结束颜色
                                    }
                                ],
                                false   // 缺省为 false
                            ),
                    }
                },
                label: {
                    show: true,
                    textStyle: {
                        fontSize: 11,
                        color: '#e9e9e9'
                    }
                }
            },
            series: [
                {
                    type: 'map',
                    map: 'china',
                    aspectScale: 0.75,
                    geoIndex: 0,
                    roam: true,
                    label: {
                        normal: {
                            show: false,
                        },
                        emphasis: {
                            show: false,
                        }
                    },
                    itemStyle: {
                        normal: {
                            areaColor: '#1cd8a8',
                            borderColor: '#fff',
                            borderWidth: 1,
                        },
                        emphasis: {
                            areaColor: '#FFAE00',
                        }
                    },
                    data: data[saleOrRishang]
                }
            ]
        };
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    });
}

// 启动|刷新 浏览器 调用
market5();

// jquery: 点击切换数据（省份销售额 / 日商）
$(".mapA").click(function () {
    // 卖场
    var market_name = $("#marketName option:selected").text();
    // 销量 还是 门店平均销量
    var saleOrRishang = $(this)['context']['innerText'];
    // 最大值
    var max = "max_" + $(this)['context']['innerText'];
    market5(market_name, saleOrRishang=saleOrRishang, max=max);
});